	<template>
		<view>
			<view class="tabContent" v-show="true">

				<view v-for="(item, index) in tableData" :key="index">

					<view class="paramBox">
						<view class="param-title" :class="[item.level===0?'jinshi':'',item.level===1?'shaoshi':'']">{{item.name}}</view>
						<view class="param-content" >
							<view style="width: 100%;" v-for="(subItem, subIndex) in item.list" :key="subIndex">
								<view class="param-item" :class="subIndex%2 == 0?'':'bor1'">
									<label style="padding-right: 16upx;">{{subItem.value}}</label>
									<text style="">{{subItem.name}}</text>
								</view>
							
							</view>
						</view>
					</view>

				</view>

				<view style="height: 30rpx;"></view>
			</view>

		</view>
	</template>

	<script>
		export default {
			props: {

				tableData: {
					type: Array,
					default () {
						return []
					}
				}

			},
			data() {
				return {

				}
			},
			methods: {


			}

		}
	</script>

	<style scoped>
		.tabContent {
			background: #fff;
			overflow: hidden;
		}

		.param-title {
			background: #f5f5f5;
			height: 80rpx;
			line-height: 80rpx;
			margin: 20rpx 30rpx 0;
			font-size: 28rpx;
			text-indent: 30rpx;
		}
		.param-content{
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			margin: 20rpx 30rpx 0;
		}
		.param-item {
			/* min-height: 80rpx; */
			/* line-height: 80rpx; */
			font-size: 28rpx;
			border-bottom: 1rpx solid #f5f5f5;
			/* margin: 0 30rpx; */
			border-left: 1rpx solid #f5f5f5;
			padding: 20rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
		}

		.param-item label {
			color: #ff0000;
			
		}
		.bor1{
			border-right: 1rpx solid #f5f5f5;
		}
		.jinshi{
			color: #f18686;
		}
		.shaoshi{
			color: #f1cc86;
		}
	</style>